<template>
	<view class="wrap">
		<!-- <view class="menu">
			<view class="borderBottom column" v-for="(item, index) in menuInfo.list" :key="index" :class="menuInfo.base.class">
				<navigator :url="item.url" :class="item.class">
					<text v-text="item[ele]" v-for="(ele, index) in menuInfo.base.menuProp" :key="index"></text>
					<icon class="iconfont iconarrow-right-copy-copy next"></icon>
				</navigator>
			</view>
		</view> -->
		<ly-tree :props="props" :tree-data="treeData" :ready="ready" node-key="roomCode" @node-expand="handleNodeExpand" @node-click="handleNodeClick"></ly-tree>
	</view>
</template>

<script>
import dormMixins from '@/libs/dormMixins.js';
import LyTree from '@/components/ly-tree/ly-tree.vue';
export default {
	mixins: [dormMixins],
	data() {
		return {
			ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
			treeData: [],
			studentName: '',
			isInit: false,
			menuInfo: {
				base: {
					menuProp: ['name']
				},
				list: []
			},
			pageParams: {
				pageNum: 1,
				pageSize: 20
			},
			props: function() {
				return {
					label: 'name', // 指把数据中的‘personName’当做label也就是节点名称
					// children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					id: 'roomCode'
				};
			}
		};
	},
	async onLoad() {
		// 模拟异步请求
		setTimeout(() => {
			this.ready = true;
		}, 2000);
	},
	onShow() {
		this.fetchData();
		this.getData();
	},
	methods: {
		// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
		handleNodeClick(obj) {
			if(obj.expanded) return 
			let data = obj.data.roomCode
			let arr = data.split('-')
			let bdId= arr[0]
			let flrId= arr[1]
			let roomId= arr[2]
			uni.navigateTo({
				url:`check?bdId=${bdId}&flrId=${flrId}&roomId=${roomId}`
			})
		},
		handleNodeExpand(obj) {
			// console.log('handleNodeExpand', JSON.stringify(obj));
		},
		async getData() {
			let data = await this.$http.get({ url: '/stu/common/dormTree' });
			this.treeData = data.result;
		},
		async fetchData() {
			let list = await this.fetchBuild({ ...this.pageParams });
			this.menuInfo.list = list.map(item => {
				return {
					id: item.id,
					name: item.bdName,
					url: `floor?bdId=${item.id}`
				};
			});
		}
	},
	components: {
		LyTree
	},
	computed: {}
};
</script>

<style lang="scss" scoped>
.search {
	width: 650upx;
	margin: 0 auto 20upx auto;
	border: 1upx solid #ddd;
	height: 60upx;
	border-radius: 30upx;
	position: relative;

	image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 5upx;
		left: 10upx;
	}

	input {
		width: 590upx;
		height: 50upx;
		position: absolute;
		left: 60upx;
		top: 5upx;
		color: #999;
		font-size: 28upx;
	}

	.input-placeholder {
		color: #999;
		font-size: 28upx;
	}
}

.menu {
	padding: 0 50upx 120upx 50upx;

	.column {
		display: flex;
		align-items: center;

		.choose {
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			background: #fff;
			margin: 0 10upx;
			font-size: 0;
			border: 1upx solid #ccc;
		}

		.chooseActive {
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			font-size: 22upx;
			background: #3ed392;
			color: #fff;
			margin: 0 10upx;
			line-height: 30upx;
			text-align: center;
		}
	}

	navigator {
		flex: 0 1 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tit {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28upx;
			line-height: 100upx;
			font-weight: 600;
		}
	}

	.next {
		margin-left: auto;
		float: right;
	}
}

page {
	min-height: 100%;

	.wrap {
		min-height: 100%;
		padding-top: 20upx;
	}

	.submitButtonActive {
		position: fixed;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
